<template>
  <view class="zjl_mine">
    <!-- <image class="zjl_mine_bg_image" src="@/static/my_bg.png" mode="widthFix" /> -->
    <view class="zjl_mine_content w100 h100">
      <view class="login_btn df ">
        <view class="image df-c">
          <u-avatar :src="user_info.avatarUrl"></u-avatar>
        </view>
        <view class="text" @click="sub_login" v-if="is_show">登录/注册</view>
        <view class="text text2 df jc-sb" v-else>
          <text>{{user_info.nickName}}</text>
          <view><button class="login_u_btn" @click="out_login" size="mini">退出登录</button></view>
        </view>
      </view>

      <view class="create_tools df ai-c jc-c">
        <view class="earnings">我的收益</view>
        <view class="products">我的作品</view>
      </view>

      <view class="list">
        <uni-list>
          <uni-list-item v-for="item in mine_list" :key="item.id" :title="item.title" show-extra-icon :extra-icon="item.icon" link @click="list_click(item)"></uni-list-item>

        </uni-list>
        <uni-list-item :title="'分享'" show-extra-icon :extra-icon="{	type: 'pyq', color: '#bd6dda', size: 22, }" link>
          <template v-slot:body>
            <button class="share_button " open-type="share">
              分享好友</button>
          </template>
        </uni-list-item>

      </view>

    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";

onLoad(() => {
  let storage_user_info = uni.getStorageSync("user_info") ? JSON.parse(uni.getStorageSync("user_info")) : "";
  console.log(storage_user_info);
  if (storage_user_info) {
    user_info.value = storage_user_info;
    is_show.value = false;
  }
});
onShareAppMessage(() => {
  return {
    path: "/pages/mine/Mine",
  };
});
// 分享朋友圈
onShareTimeline(() => {
  return {};
});
const is_show = ref(true);
// 用户信息
interface userType {
  avatarUrl: string;
  nickName: string;
}
const user_info = ref<userType>({
  avatarUrl: "",
  nickName: "",
});
const mine_list = ref([
  {
    title: "我的关注",
    icon: {
      type: "auth-filled",
      color: "#bd6dda",
      size: "22",
    },
    id: 10,
    path: "/pagesMine/MyFocus/MyFocus",
  },
  {
    title: "我的收藏",
    icon: {
      type: "folder-add-filled",
      color: "#bd6dda",
      size: "22",
    },
    id: 11,
    path: "/pagesMine/MyFavorite/MyFavorite",
  },

  {
    title: "开通会员",
    icon: {
      type: "vip-filled",
      color: "#bd6dda",
      size: "22",
    },
    id: 1,
  },
  {
    title: "成为创作者",
    icon: {
      type: "staff-filled",
      color: "#bd6dda",
      size: "22",
    },
    id: 2,
  },
  {
    title: "下载历史",
    icon: {
      type: "download-filled",
      color: "#bd6dda",
      size: "22",
    },
    id: 3,
  },
  {
    title: "常见问题",
    icon: {
      type: "wallet-filled",
      color: "#bd6dda",
      size: "22",
    },
    id: 4,
  },
  {
    title: "关于我们",
    icon: {
      type: "info-filled",
      color: "#bd6dda",
      size: "22",
    },
    id: 5,
  },
]);

// 登录
const sub_login = () => {
  uni.getProvider({
    service: "oauth",
    success: (res) => {
      console.log("getProvider", res);
      try {
        if (res.provider.includes("toutiao")) {
          uni.login({
            provider: "toutiao",
            success: (login_res) => {
              console.log("login_res", login_res);
              if (login_res) {
                uni.getUserInfo({
                  provider: "toutiao",
                  success: (user_res) => {
                    console.log("user_res", user_res);
                    user_info.value.avatarUrl = user_res.userInfo.avatarUrl;
                    user_info.value.nickName = user_res.userInfo.nickName;
                    is_show.value = false;
                    uni.setStorageSync("user_info", JSON.stringify(user_res.userInfo));
                  },
                });
              }
            },
          });
        }
        if (res.provider.includes("weixin")) {
          uni.login({
            provider: "weixin",
            success: (login_res) => {
              console.log("login_res", login_res);
              if (login_res) {
                uni.getUserInfo({
                  provider: "weixin",
                  success: (user_res) => {
                    console.log("user_res", user_res);
                    user_info.value.avatarUrl = user_res.userInfo.avatarUrl;
                    user_info.value.nickName = user_res.userInfo.nickName;
                    is_show.value = false;
                    uni.setStorageSync("user_info", JSON.stringify(user_res.userInfo));
                  },
                });
              }
            },
          });
        }
      } catch (err) {
        console.log(err);
      }
    },
  });
};

// 退出登录
const out_login = () => {
  uni.removeStorageSync("user_info");
  user_info.value = {};
  is_show.value = true;
};

const list_click = (item: any) => {
  if (item.path) {
    uni.navigateTo({
      url: item.path,
    });
  }

  console.log(item);
  if (item.id === 4) {
    uni.navigateTo({
      url: "/pagesMine/CommonProblem/CommonProblem",
    });
  } else if (item.id === 5) {
    uni.navigateTo({
      url: "/pagesMine/AboutUs/AboutUs",
    });
  }
  // else if (item.id === 6) {
  //   console.log(onShareAppMessage);

  //   uni.showShareMenu({
  //     withShareTicket: true,
  //     path: "/pages/index/index",
  //     title: "首页",
  //     success: (res) => {
  //       console.log(res);
  //     },
  //     fail: (err) => {
  //       console.log(err);
  //     },
  //     complete: (res) => {
  //       console.log(res);
  //     },
  //   });

  //   // uni.showShareMenu({
  //   //   withShareTicket: false,
  //   //   path: "/pages/mine/Mine",
  //   //   success: (res) => {
  //   //     console.log(res);
  //   //   },
  //   //   fail: (err) => {
  //   //     console.log(err);
  //   //   },
  //   // });
  // }
};
</script>

<style scoped lang="scss">
@import "../../uni.scss";
.zjl_mine {
  width: 100%;
  padding: 0 0;
  box-sizing: border-box;
  // background: url('@/static/my_bg.png') 100% 100%;
  position: relative;
  height: 100vh;
  // background-color: rgba(0 ,0,0,.5);
  &_bg_image {
    width: 100%;
  }

  &_content {
    position: absolute;
    top: 0;
    left: 0;
  }

  .login_btn {
    width: 95%;
    margin: 0 auto;
    // background-color: #2e25a0;
    border-radius: 20rpx;
    margin-top: 30rpx;

    .image {
      width: 20%;
      padding: 12rpx;

      image {
        width: 104rpx;
        height: 104rpx;
      }
    }

    .text {
      width: 80%;
      color: #000;
      font-weight: 600;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding-right: 30rpx;
    }
    .text2 {
      justify-content: space-between;
    }

    .login_u_btn {
      // width: 180rpx;
      // background-color: #4cd964;
      background-image: $linearGradient;
      color: #fff;
      font-weight: normal;
    }

    .u-button {
      width: 140rpx;
    }
  }

  .list {
    overflow: hidden;
    width: 95%;
    margin: 0 auto;
    border-radius: 20rpx;
    margin-top: 30rpx;
    // :deep(.uni-list) {
    //     border-radius: 20rpx;
    //     background-color: #1b1b1b;
    //     .uni-list-item{
    //         background-color: #1b1b1b !important;
    //     }
    //     .uni-list--border-top{
    //         display: none;
    //     }
    // }
  }
}

.create_tools {
  width: 100%;
  padding: 0 2.5%;
  box-sizing: border-box;
  .earnings {
    flex: 1;
  }
  .products {
    flex: 1;
  }
}

.share_button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0 none !important;
  text-align: left;
  font-size: 14px;
  padding-left: 90rpx;
  line-height: 90rpx;
  color: #3b4144;
  display: flex;
  align-items: center;

  &::after {
    border: none;
  }
}

.share_button ::after {
  border: 0 none;

  color: linear-gradient(to right, #f26dbe, #796cfc);
  background-image: linear-gradient(to right, #f26dbe, #796cfc);
}

.uni-icons {
  background-image: $linearGradient;
}
:deep(.uni-icons) {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: $linearGradient;
}
</style>
